<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      background: #282828;
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 7px solid #282828;
      box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5),
        inset 4px 4px 10px rgba(0, 0, 0, 0.5),
        inset -4px -4px 10px rgba(67, 67, 67, 0.5),
        4px 4px 10px rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;

    }

    .outer-clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      background: #282828;


      overflow: hidden;
    }

    .outer-clock-face::after {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      transform: rotate(90deg)
    }

    .outer-clock-face::before,
    .outer-clock-face::after,
    .outer-clock-face .marking {
      content: '';
      position: absolute;
      width: 5px;
      height: 100%;
      background: #1df52f;
      z-index: 0;
      left: 49%;
    }

    .outer-clock-face .marking {
      background: #bdbdcb;
      width: 3px;
    }

    .outer-clock-face .marking.marking-one {
      transform: rotate(30deg)
    }

    .outer-clock-face .marking.marking-two {
      transform: rotate(60deg)
    }

    .outer-clock-face .marking.marking-three {
      transform: rotate(120deg)
    }

    .outer-clock-face .marking.marking-four {
      transform: rotate(150deg)
    }

    .inner-clock-face {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      background: #282828;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      z-index: 1;
    }

    .inner-clock-face::before {
      content: '';
      position: absolute;
      top: 50%;
      border-radius: 18px;
      margin-left: -9px;
      margin-top: -6px;
      left: 50%;
      width: 16px;
      height: 16px;
      background: #4d4b63;
      z-index: 11;
    }

    .hand {
      width: 50%;
      right: 50%;
      height: 6px;
      background: #61afff;
      position: absolute;
      top: 50%;
      border-radius: 6px;
      transform-origin: 100%;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

    .hand.hour-hand {
      width: 30%;
      z-index: 5;
    }

    .hand.min-hand {
      height: 3px;
      z-index: 10;
      width: 40%;
    }

    .hand.second-hand {
      background: #ee791a;
      width: 45%;
      height: 2px;
      z-index: 8;
    }

    h2 {
      width: 100px;
      height: 20px;
      position: absolute;
      background-color: white;
      z-index: 3;
      top: 45px;
      left: 90px;
      font-size: 16px;
      text-align: center;
      line-height: 20px;
    }
  </style>

</head>

<body>
  <div class="clock">
    <!-- 表 -->
    <div class="outer-clock-face">
      <!-- 刻度 -->
      <div class="marking marking-one"></div>
      <div class="marking marking-two"></div>
      <div class="marking marking-three"></div>
      <div class="marking marking-four"></div>
    </div>
    <div class="inner-clock-face">
      <!-- 表盘 -->
      <h2></h2>
      <!-- 电子显示 -->
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>

</html>
<script>

  let secondHand = document.querySelector('.second-hand');
  let minsHand = document.querySelector('.min-hand');
  let hourHand = document.querySelector('.hour-hand');
  let h2 = document.querySelector('h2')
  function setDate() {
    // 获取时间
    let now = new Date();
    // 获取的秒数
    let seconds = now.getSeconds();
    let secondsDegrees = ((seconds / 60) * 360) + 90; // 秒针旋转的角度 +90是默认没有旋转样式是指向的是9点钟的方向
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    let mins = now.getMinutes();
    let minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
    // 分针旋转的角度       秒针转多少秒 分针转6度的60分之几
    minsHand.style.transform = `rotate(${minsDegrees}deg)`;

    let hour = now.getHours();
    let hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
    // 时针旋转的角度       分针转多少分 时针转6度的60分之几
    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    // 电子显示区域
    if (hour < 10) {
      hour = '0' + hour
    }
    if (mins < 10) {
      mins = '0' + mins
    }
    if (seconds < 10) {
      seconds = '0' + seconds
    }
    h2.innerHTML = hour + ':' + mins + ':' + seconds
  }
  setInterval(setDate, 500)
</script>